<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" lang="zh">
<head>
  <meta charset="UTF-8"/>
  <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"/>
  <title>事件</title>

  <div th:replace="common :: common_header"></div>
</head>
<body>
<div th:replace="common::#leftmenu"></div>
<div class="main-content">
  <form action="/events" class="form-inline">
    <label for="eventType">事件类型:</label><select id="eventType" name="eventType" class="form-control text-center">
      <option th:each="type:${eventType}"
              th:text="${type}"
              th:value="${type}"
              th:selected="${#strings.equals(param.eventType, type)}">
      </option>
    </select>
    <label for="startTime">起始日期：</label><input id="startTime" type="date" name="startTime" th:value="${startTime}"/>
    <label for="endTime">结束日期：</label><input id="endTime" type="date" name="endTime" th:value="${endTime}"/>
    <button type="submit">搜索</button>
  </form>
  <table class="table table-hover table-striped table-bordered table-sm">
    <thead class="text-center">
    <tr>
      <th>序号</th>
      <th>发生时间</th>
      <th>事件名称</th>
      <th>事件类型</th>
      <th>扩展内容</th>
    </tr>
    </thead>
    <tbody>
    <tr th:each="event,stat:${pageInfo.list}" class="text-center">
      <td th:text="${stat.index+(pageInfo.pageNum-1)*pageInfo.pageSize}">id</td>
      <td th:text="${#dates.format(event.happenTime,'yyyy-MM-dd HH:mm:ss')}+':'+${#numbers.formatInteger(event.millsecond,4)}">发生时间</td>
      <td th:text="${event.name}">名字</td>
      <td th:text="${event.type}">类型</td>
      <td th:text="${event.extend}">扩展内容</td>
    </tr>
    </tbody>
  </table>
  <div>
    <p>当前第 <span th:text="${pageInfo.pageNum}"></span> 页，总 <span th:text="${pageInfo.pages}"></span> 页，共 <span th:text="${pageInfo.total}"></span> 条记录</p>
    <a th:href="@{/events(eventType=${param.eventType}, startTime=${startTime}, endTime=${endTime}, pageNum=1)}">首页</a>
    <a th:href="@{/events(eventType=${param.eventType}, startTime=${startTime}, endTime=${endTime}, pageNum=${pageInfo.hasPreviousPage}?${pageInfo.prePage}:1)}">上一页</a>
    <a th:href="@{/events(eventType=${param.eventType}, startTime=${startTime}, endTime=${endTime}, pageNum=${pageInfo.hasNextPage}?${pageInfo.nextPage}:${pageInfo.pages})}">下一页</a>
    <a th:href="@{/events(eventType=${param.eventType}, startTime=${startTime}, endTime=${endTime}, pageNum=${pageInfo.pages})}">尾页</a>
  </div>
</div>
</body>
<!--js-->
<script>
  // const oTxt = document.getElementById('startTime');
  // const oBtn = document.getElementById('btn');
  //
  // function isnull(val) {
  //   const str = val.replace(/(^\s*)|(\s*$)/g, '');//去除空格;
  //   if (str === '' || str === undefined || str == null) {
  //     //return true;
  //     console.log('空')
  //   } else {
  //     //return false;
  //     console.log('非空');
  //   }
  // }
  // oBtn.onclick = function () {
  //   isnull( oTxt.value );
  // }
</script>
</html>